import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
} from 'react-native';
import Common from '../common/constants';
import {SearchBar, WhiteSpace, WingBlank, Tag} from 'antd-mobile';
//import { fetchBanner } from '../actions/bannerAction';

//import SearchHeader from '../components/SearchHeader';
//import CardListContainer from '../containers/CardListContainer';

const hots = [
    {'name' : '棋盘山'},
    {'name' : '怪坡'},
    {'name' : '仟睿达'},
    {'name' : '龙之梦'},
    {'name' : '全建水世界'},
    {'name' : '七色画'},

];


export default class Search extends React.Component{

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            //dispatch(fetchBanner());
            
            //dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
        });
    }

    render(){
        return (
            <View style={styles.main}>
              <SearchBar
                value='居游电子票'
                placeholder="搜索"
                onSubmit={value => console.log(value, 'onSubmit')}
                onClear={value => console.log(value, 'onClear')}
                onFocus={() => console.log('onFocus')}
                onBlur={() => console.log('onBlur')}
                onCancel={() => console.log('onCancel')}
                showCancelButton
                //onChange={this.onChange}
              />
              <WhiteSpace size="lg" />
              <WingBlank size="lg">
                <Text>热门搜索</Text>
              </WingBlank>
              <WhiteSpace size="lg" />
              <View style={styles.citys}>
                {hots.map((obj, i) => {
                    return (
                        <Tag key={i} style={styles.city} 
                            data-seed={obj.name}
                            //selected={obj.name == this.state.city}
                            onChange={(selected) => {
                                console.log(selected);
                                console.log(obj);
                                
                            }}
                            >
                            {obj.name}
                        </Tag>
                    );
                })}
              </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 65
    },

    citys : {
        flexDirection : 'row',
        flexWrap : 'wrap',
        paddingLeft : 5,
        paddingRight : 5,
    },

    city : {
        //width : Common.window.width / 4 - 20,
        marginLeft : 5,
        marginRight : 5,
        marginBottom : 10,
    }

})